import React, { Component } from 'react';
import { observer } from 'mobx-react';
import _ from 'lodash';
import moment from 'moment';
import Former, { validate, formStore } from '../../../components/Former';
import Button from '../../../components/Button';

@observer
class Form extends Component {
  state = {
    currentIns: null,
    prods: [],
    init: true
  }
  _validate = () => {
    validate((err, val) => {
      if (!err && _.isFunction(this.props.onSubmit)) {
        if (this.props.id) {
          val.policyId = this.props.id;
        }
        val.customerId = this.props.customerId;
        this.props.onSubmit(val);
      }
    });
  };

  memberData = data =>
    _.map(data, d => ({
      value: d.customerFamilyMemberId,
      label: `${d.name}(${d.relationTypeName})`
    }));

  changeIns = currentIns => {
    this.setState({
      currentIns,
      prods: this.props.policy.baseData_prod[currentIns].slice()
    });
    if (!this.state.init) {
      formStore.setValue('insuranceProductId', undefined);
    } else {
      this.setState({
        init: false,
      })
    }
  };
  componentWillReact() {
    if (
      this.props.policy.current &&
      this.props.policy.current.insuranceCompanyId
    ) {
      this.setState({
        currentIns: this.props.policy.current.insuranceCompanyId,
      });
    }
  }
  render() {
    const policy = this.props.policy.current || {};
    if (
      (this.props.id && _.isEmpty(policy)) ||
      _.isEmpty(this.props.policy.baseData_ins)
    ) {
      return null;
    }
    const members = this.memberData(this.props.members.data);
    const fields = [
      {
        label: '承保机构',
        placeholder: '请选择承保机构',
        type: 'Selecter',
        key: 'insuranceCompanyId',
        rules: [{ require: true }],
        initialValue: policy.insuranceCompanyId,
        options: this.props.policy.baseData_ins.slice() || [],
        afterChange: this.changeIns
      },
      {
        label: '保险产品',
        placeholder: '请选择保险产品',
        type: 'Selecter',
        key: 'insuranceProductId',
        rules: [{ require: true }],
        initialValue: policy.insuranceProductId,
        options: this.state.prods,
      },
      {
        label: '投保人',
        placeholder: '请选择投保人',
        type: 'Selecter',
        key: 'applicantId',
        initialValue: policy.applicantId,
        rules: [{ require: true }],
        options: members || []
      },
      {
        label: '被保人',
        placeholder: '请选择被保人',
        type: 'Selecter',
        key: 'insuredId',
        initialValue: policy.insuredId,
        rules: [{ require: true }],
        options: members || []
      },
      {
        label: '承保日期',
        placeholder: '请选择承保日期',
        type: 'Date',
        key: 'underWritingDate',
        mode: 'date',
        initialValue: policy.underWritingDate || moment().format('YYYY-MM-DD'),
        rules: [{ require: true }]
      },
      {
        label: '缴费年限(年)',
        type: 'Number',
        key: 'premiumPaymentYears',
        rules: [{ require: true }],
        step: 5,
        maximumValue: 40,
        minimumValue: 0,
        initialValue: policy.premiumPaymentYears,
        allowEdit: true
      },
      {
        label: '保险期限(年)',
        type: 'Number',
        key: 'insurancePeriod',
        rules: [{ require: true }],
        step: 5,
        maximumValue: 100,
        minimumValue: 0,
        initialValue: policy.insurancePeriod,
        allowEdit: true
      },
      {
        label: '保费(元/年)',
        type: 'Number',
        key: 'premium',
        rules: [{ require: true }],
        step: 1000,
        maximumValue: 100000,
        minimumValue: 0,
        initialValue: policy.premium,
        allowEdit: true
      },
      {
        label: '保额(万元)',
        type: 'Number',
        key: 'insuredAmount',
        rules: [{ require: true }],
        step: 10,
        maximumValue: 1000,
        minimumValue: 0,
        initialValue: policy.insuredAmount,
        allowEdit: true
      }
    ];
    return (
      <Former
        fields={[...fields]}
        bottom={
          <Button
            onPress={this._validate}
            type="primary"
            title="提交家庭保单信息"
          />
        }
      />
    );
  }
}

export default Form;
